<template>
	<view class="wrap mask">
		<!-- #ifdef APP-PLUS -->  
		<view class="status_bar">  
		    <view class="top_view"></view>  
		</view>  
		<!-- #endif -->
		<view class="con">
			<swiper class="swiper" :autoplay="autoplay" :duration="duration" @change="bannerChange">
				<swiper-item>
					<view class="swiper-item">
						<view class="swiper-item-text">
							<view class="swiper-item-title">版本新升级</view>
							<view class="swiper-item-content">降低成本，提高质量</view>
						</view>
						<view class="swiper-item-img">
							<image class="itemImg" :src="guide1" mode="aspectFit"></image>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="swiper-item-text">
							<view class="swiper-item-title">服务新入口</view>
							<view class="swiper-item-content">零代码/低代码个性化开发</view>
						</view>
						<view class="swiper-item-img">
							<image class="itemImg" :src="guide2" mode="aspectFit"></image>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="swiper-item-text">
							<view class="swiper-item-title">采用新技术</view>
							<view class="swiper-item-content">控制开发成本，解决团队困难</view>
						</view>
						<view class="swiper-item-img">
							<image class="itemImg" :src="guide3" mode="aspectFit"></image>
						</view>
						<!-- 立即开启按钮 -->
						<view class="swiper-item-btn"><button class="experience" @tap="launchFlag()">{{experience}}</button></view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 跳过按钮 -->
			<view class="jump-over" @tap="launchFlag()">{{jumpover}}<label class=" font-size30 iconfont icon-xiangyou"></label></view>
			<view class="bannerDots" v-if="currentb!=3">
				<view class="banner-dot" v-for="(item,index) in bannerDot" :key="index" :class="{'active':index===currentb}">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/js/config.js'
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				autoplay: false,
				duration: 500,
				jumpover: '跳过',
				experience: '立即开启',
				bannerDot: [{
					id: 0
				}, {
					id: 1
				}, {
					id: 2
				}],
				currentb: 0,
				guide1: config.Resources.guide.guide1,
				guide2: config.Resources.guide.guide2,
				guide3: config.Resources.guide.guide3
			}
		},
		methods: {
			launchFlag: function() {
				uni.setStorage({
					key: 'launchFlag',
					data: true,
				});
				uni.reLaunch({
					url: '/pages/users/sign-in/sign-in',
				});
			},
			
			bannerChange: function(e) {
				let current = e.detail.current;
				this.currentb = current;
			},
		}
	}
</script>
<style>
	page,
	.wrap {
		width: 100%;
		height: 100%;
	}
	.con {
		width: 100%;
		height: 100%;
		background-size: 100% auto;
		padding: 0;
		touch-action: none;
		position: fixed;
	}
	.status_bar {
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #FFFFFF;  
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    background-color: #FFFFFF;  
	    top: 0;  
	    z-index: 999;  
	}
	.itemImg{
		width: 554rpx;
	}
	.swiper {
		width: 100%;
		height: 100% !important;
		background: #FFFFFF;
	}
	.swiper-item {
		width: 100%;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.swiper-item-img {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		/* #ifndef APP-PLUS */
		padding-top: 4.6vh
		/* #endif */
	}
	/* #ifdef APP-PLUS */
	.swiper-item-img {
		padding-top: 13.49vh
	}
	/* #endif */
	.swiper-item-text {
		padding-top: 7.5vh;
	}

	.swiper-item-title {
		line-height: 2em;
		font-size: 48upx;
		color: #4285f4;
		font-weight: 500;
	}

	.swiper-item-content {
		font-size: 34upx;
		color: #999999;
		padding-top: 2.2vh;
	}
	.swiper-item-btn{
		text-align: center;
	}
	
	.bannerDots {
		width: 100%;
		height: 16rpx;
		display: flex;
		position: fixed;
		bottom: 8%;
		z-index: 99;
		left: 50%;
		transform: translate(-50%);
		align-items: center;
		justify-content: center;
	}

	.banner-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background: #CACACA;
		margin: 0 10rpx;
	}

	.bannerDots .banner-dot.active {
		width: 40rpx;
		height: 16rpx;
		background: #1285F4;
		border-radius: 8rpx;
	}

	.jump-over {
		position: absolute;
		position: absolute;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 32rpx;
		z-index: 999;
		right: 20rpx;
		top: 10rpx;
		color: #777777;
	}

	.experience {
		font-size: 32rpx;
		margin-top: 8.2vh;
		z-index: 100;
		border-radius: 40rpx;
		background-color: #1285F4;
		color: #FFFFFF;
		width: 260rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
	}
</style>
